<template>
  <div id="productPopover" class="product-popover-view">

    <el-popover ref="popover1" v-model:visible="visible" :placement="position" :width="900" trigger="manual">
      <template #reference>
        <slot />
      </template>
      <div style="display: flex;justify-content: space-between;padding-bottom: 10px">
        <div>
          <span v-if="column">{{ column.distributeServeNo }}/{{ column.distributePrice }}</span>
        </div>

        <div class="btn-view">
          <el-button class="main-btn" size="small" type="primary" @click="onCancel">取消</el-button>
          <el-button class="main-btn" size="small" type="primary" @click="onConfirm">确定</el-button>
        </div>

      </div>
      <el-table ref="singleTable" header-cell-class-name="popover-table-header" border :data="tableData"
        highlight-current-row style="width: 100%" @current-change="handleCurrentChange">
        <el-table-column label="编号" align="center" width="130" prop="distributeServeNo" />
        <el-table-column label="配送服务摘要名称" align="center" prop="distributeAbstract" :show-overflow-tooltip="true" />
        <el-table-column label="配送地区">
          <template #default="scope">
            <area-list-view :areas="scope.row.region" />
          </template>
        </el-table-column>
        <el-table-column label="配送费" align="center" width="80" prop="distributePrice">
          <template #default="{row}">
            <div v-if="row.computeMode==='固定价格'">
              <span>{{ row.distributePrice }}元</span>
              <span v-if="sellUnit">/{{ getLabel('sell_unit',sellUnit) }}</span>
            </div>
            <div v-if="row.computeMode==='终端价百分比'">
              <span>{{ row.distributePrice }}%</span><span>终端价</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="服务结束日期" align="center" :show-overflow-tooltip="true">
          <template #default="{row}">
            {{ dateFormat("yyyy-mm-dd",row.expireTime) }}
          </template>
        </el-table-column>
        <el-table-column label="关联配送合同" align="center" prop="contractNumber" />
      </el-table>
    </el-popover>

  </div>
</template>

<script>
import {defineComponent, getCurrentInstance, inject, onMounted, ref,} from "vue";

export default defineComponent({
  name: "Index",
  props: {
    position: {
      type: String,
      default: "top",
    },

    distributorsData: {
      type: Object,
      default() {
        return {
          productId: 0, // 产品id
          distributeId: 0, // 配送商id
          provinceCode: "", // 省code
          cityCode: "", // 市code
          areaCode: "", // 区code
        };
      },
    },
    sellUnit: {
      type: String,
      default: "",
    },
    agentProdoductId: {
      type: Number,
      default: 0,
    },
  },
  setup(props, { emit }) {
    const currentInstance = getCurrentInstance();
    const api = inject("api");
    var visible = ref(false);
    var tableData = ref([]);
    var column = ref(null);
    const singleTable = ref(null);

    const getData = () => {
      if (props.agentProdoductId === 0) {
        api.terminal.PRODUCT_GETPULLLIST(props.distributorsData).then((res) => {
          if (!res.code && res.data) {
            tableData.value = res.data.distrbuteServeList || [];
          }
        });
      } else {
        api.marketingMatching
          .REGIONAL_DISTRIBUTION_PULLLIST_SERVICE(
            props.agentProdoductId,
            props.distributorsData.distributeId
          )
          .then((res) => {
            if (!res.code && res.data) {
              tableData.value = res.data || [];
            }
          });
      }
    };

    const handlOpen = () => {
      getData();
      visible.value = true;
    };

    onMounted(() => {
      document.addEventListener("click", function (e) {
        // console.log(document.getElementById('productPopover'))
        var pop = document.getElementById("productPopover");

        if (e.target !== pop && !document.contains(pop, e.target)) {
        } else {
          visible.value = false;
        }
      });
    });

    const handleCurrentChange = (val) => {
      column.value = val;
    };

    const onConfirm = () => {
      if (!column) {
        currentInstance.proxy.customMessage({
          type: "error",
          message: "请选择配送费",
        });
      }

      emit("confirm", { ...column.value });
      column.value = null;
      setTimeout(() => {
        visible.value = false;
      }, 100);
    };

    const onCancel = () => {
      singleTable.value.setCurrentRow();
      column.value = null;
      visible.value = false;
    };

    const onClose = () => {
      visible.value = false;
    };

    return {
      visible,
      tableData,
      singleTable,
      column,

      handleCurrentChange,
      onConfirm,
      onCancel,
      onClose,
      handlOpen,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";
</style>
